<mat-card class="container mat-elevation-z4">
  <mat-card-header>
    <h3 mat-line>
      {{stepConfigs.name}}
      <button mat-icon-button (click)="addRow()">
        <mat-icon>add_circle_outline</mat-icon>
      </button>
      <button mat-icon-button (click)="saveConfig()">
        <mat-icon>save</mat-icon>
      </button>
      <button mat-icon-button (click)="run()" [disabled]="!(dataSource.data.length > 0)">
        <mat-icon>play_circle_outline</mat-icon>
      </button>
      <button mat-icon-button (click)="delete()" [disabled]="!selection.hasValue()">
        <mat-icon>delete</mat-icon>
      </button>
    </h3>
  </mat-card-header>
  <mat-card-content>
    <table mat-table [dataSource]="dataSource">

      <!-- Checkbox Column -->
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)">
          </mat-checkbox>
        </td>
      </ng-container>
    
      <!-- Position Column -->
      <ng-container matColumnDef="stepNo">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.stepNo}} 
        </td>
      </ng-container>
    
      <!-- action Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> action </th>
        <td mat-cell *matCellDef="let element"> {{element.action}}
        </td>
      </ng-container>
    
      <!-- mode Column -->
      <ng-container matColumnDef="mode">
        <th mat-header-cell *matHeaderCellDef> mode </th>
        <td mat-cell *matCellDef="let element"> {{element.mode}}
        </td>
      </ng-container>
    
      <!-- target Column -->
      <ng-container matColumnDef="target">
        <th mat-header-cell *matHeaderCellDef> target </th>
        <td mat-cell *matCellDef="let element"> {{element.target}}
        </td>
      </ng-container>
    
      <!-- value Column -->
      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef> value </th>
        <td mat-cell *matCellDef="let element"> {{element.value}} 
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickRow(row)" (contextmenu)="openContextMenu($event, row)">
      </tr>
    </table>
  </mat-card-content>
</mat-card>
<span class="menu-trigger" [matMenuTriggerFor]="menu" [ngStyle]="meunPosition"></span>
<mat-menu #menu>
  <button mat-menu-item (click)="onContextMenuDelete()">Delete</button>
  <button mat-menu-item (click)="onContextMenuCopy()">Copy</button>
</mat-menu>
